<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .class1 {
            background-color: red;
        }

        .class2 {
            color: #00FFFF;
        }
    </style>
    <title>设置样式</title>
</head>

<body>
    <div>设置class</div>
    <hr />
    <div id="demoReact"></div>
</body>
<script src="../../node_modules/babel-standalone/babel.min.js"></script>
<script src="../../node_modules/react/umd/react.development.js"></script>
<script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">

    let myClass1 = "class1";

    let myClass2 = "class2";

    let flag = true;

    let myDom = (
        <div>
            <p className={myClass1}>设置class值，需要用className属性</p>
            <p className={[myClass1,myClass2].join(" ")}>设置class值，需要用className属性</p>
            <p className={(flag ? myClass1 : "") + ' ' + myClass2}>设置class值，需要用className属性</p>
        </div>
    );
    let root = ReactDOM.createRoot(document.getElementById("demoReact"));
    root.render(myDom);
</script>

</html>